<template>
    <div class="decoration-pc min-w-[1100px]">
        <el-card shadow="never" class="!border-none">
            <el-row style="margin:20px 0">
                <el-col :span="8">
                    <div class="label">标题</div>
                    <div class="val">{{ state.data.title }}</div>
                </el-col>
                <el-col :span="8">
                    <div class="label">学习时长</div>
                    <div class="val">{{ state.data.duration }}</div>
                </el-col>

                <el-col :span="8">
                    <div class="label">学习积分</div>
                    <div class="val">{{ state.data.integral }}</div>
                </el-col>

            </el-row>
            <el-row style="margin:20px 0">
                <el-col :span="8">
                    <div class="label">学习状态</div>
                    <div class="val" style="margin-left:-10px">
                        <el-tag class="ml-2" :type="state.data.status ? 'primary' : 'danger'">
                            {{ state.data.status_desc }}
                        </el-tag>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="label">创建时间</div>
                    <div class="val">{{ state.data.create_time }}</div>
                </el-col>
            </el-row>

            <el-row style="margin:20px 0">
                <el-col :span="24">
                    <div class="label">学习封面</div>
                    <image-contain style="margin-bottom: 20px; margin-top: 14px;" v-if="state.data.picture"
                        :src="state.data.picture" :width="100" :height="100" :preview-src-list="[state.data.picture]"
                        preview-teleported fit="contain" />
                </el-col>

                <el-col :span="24" v-if="state.data.type == 2">
                    <div class="label">学习视频</div>
                        <ul class="file-list flex flex-wrap mt-4">
                            <li class="file-item-wrap" style="width: 100px">
                                    <file-item :uri="state.data.video" file-size="100px" type="video" />
                                <overflow-tooltip class="mt-1" content="" />
                                <div class="operation-btns flex items-center">
                                    <el-button type="primary" link
                                        @click="handlePreview(state.data.video)">
                                        查看
                                    </el-button>
                                </div>
                            </li>
                        </ul>
                </el-col>
            </el-row>
            <el-row style="margin:20px 0">
                <el-col :span="24">
                    <div class="label">学习内容</div>
                    <div style="padding: 10px 0;" v-html="state.data.content"></div>
                </el-col>
            </el-row>
        </el-card>
    </div>
    <Preview v-model="showPreview" :url="previewUrl" type="video" />
</template>


<script lang="ts" setup name="study">
import { reactive, ref } from "vue";
import { studyDetail } from '@/api/study'
import FileItem from '../../../components/material/file.vue'
import Preview from '../../../components/material/preview.vue'

const route = useRoute()

const previewUrl = ref('')
const showPreview = ref(false)

const { id } = route.query
const state = reactive({
    data: ''
})

const getDetail = async () => {
    const data = await studyDetail({
        id
    })
    state.data = data
}
getDetail()

const handlePreview = (url: string) => {
    previewUrl.value = url
    showPreview.value = true
}
</script>

<style scoped lang="scss">
.label {
    color: #000;
    font-size: 14px;
}

.val {
    padding: 10px 0;
    color: #666;
    font-size: 14px;
}

.file-list {
    .file-item-wrap {
        margin-right: 16px;
        line-height: 1.3;
        cursor: pointer;

        .item-selected {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.5);
            box-sizing: border-box;
        }

        .operation-btns {
            height: 28px;
            visibility: hidden;
        }

        &:hover .operation-btns {
            visibility: visible;
        }
    }

}
</style>
